<template>
  <div>
    <me-scroller :pull-up-call-back="getData" :scroll-init-callback="(m)=>{mescroll=m}" style="margin-top: 0;">
      <div v-show="pageInfo.total">
        <div>
          <flexbox v-for="item in dataList" :key="item">
            <flexbox-item style="background: #fff;padding: .3rem 0;text-align: center;border-bottom: 1px solid #ccc;">
              {{item}}
            </flexbox-item>
          </flexbox>
        </div>
      </div>
    </me-scroller>
  </div>
</template>

<script>

  export default {
    name: "test",
    data() {
      return {
        mescroll: null,
        dataList: [],
        isLoading: false,
        pageInfo: {
          cur: 1,
          totalPage: 1,
          hasLoadAll: false,
          total: 1
        }
      }
    },
    watch: {},
    computed: {},
    methods: {
      getData(page) {
        if (this.isLoading || this.pageInfo.hasLoadAll) {
          return
        }

        this.isLoading = true

        setTimeout(() => {
          this.isLoading = false
          this.pageInfo = {
            cur: page + 1,
            totalPage: 100,
            hasLoadAll: page + 1 === 100,
            total: 1500
          }
          this.dataList = this.dataList.concat([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15])
          this.mescroll.endSuccess(15, !this.pageInfo.hasLoadAll)
        }, 300)


      }
    },
    created() {
    },
    mounted() {
    }
  }
</script>

<style scoped lang="less">

</style>
